<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        localStorage.setItem("name", "Sunrise");
        const user = {name: "Sunrise", age: 25, gender: "male"};
        // 将对象转换为JSON字符串存储到localStorage
        localStorage.setItem("user", JSON.stringify(user));
        
        // 从localStorage中获取数据
        const name = localStorage.getItem("name");
        // 将JSON字符串转换为对象
        const userDate = JSON.parse(localStorage.getItem("user"));

        localStorage.removeItem("name");
        // 清除localStorage中所有数据
        localStorage.clear();

        /*常见应用场景
        1.用户偏好设置,用户偏好设置
        2.表单草稿保存，未提交的表单数据临时存储，防止意外丢失
        3.缓存静态资源，存储不常变的 API 响应数据（需配合版本控制）
        */
    </script>
</body>
</html>